@use 'sass:map';
@use '../mixins/config' as *;

// margin
// generate .yq-m{t|r|b|l}-${margin}, .yq-m{|t|r|b|l}-${margin}-i, margin range: 0px - 100px

// padding
// generate .yq-p{|t|r|b|l}-${padding}, .yq-p{|t|r|b|l}-${padding}-i, padding range: 0px - 100px

$type: (
    plr: 'padding',
    ptb: 'padding',
    mlr: 'margin',
    mtb: 'margin',
);
$left-right: (
    key1: 'left',
    key2: 'right',
);
$top-bottom: (
    key1: 'top',
    key2: 'bottom',
);
@for $i from 0 through 100 {
    $spacings: (
        m: 'margin',
        mt: 'margin-top',
        mr: 'margin-right',
        mb: 'margin-bottom',
        ml: 'margin-left',
        mlr: $left-right,
        mtb: $top-bottom,
        p: 'padding',
        pt: 'padding-top',
        pr: 'padding-right',
        pb: 'padding-bottom',
        pl: 'padding-left',
        plr: $left-right,
        ptb: $top-bottom,
    );
    @each $key, $value in $spacings {
        @if $key == plr or $key == ptb or $key == mlr or $key == mtb {
            $key0: map.get($type, $key);
            $key1: map.get($value, 'key1');
            $key2: map.get($value, 'key2');
            .#{$namespace}-#{$key}-#{$i} {
                #{$key0}-#{$key1}: $i * 1rpx;
                #{$key0}-#{$key2}: $i * 1rpx;
                &-i {
                    #{$key0}-#{$key1}: $i * 1rpx !important;
                    #{$key0}-#{$key2}: $i * 1rpx !important;
                }
            }
        } @else {
            .#{$namespace}-#{$key}-#{$i} {
                #{$value}: $i * 1rpx;
                &-i {
                    #{$value}: $i * 1rpx !important;
                }
            }
        }
    }
}
